<template>
  <div class="container" @scroll="handleScroll" ref="scrollDom">
    <!-- 滚动的头部 -->
    <div class="titleScroll" v-if="!isScroll">
      <p>{{ companyInfo.companyName }}</p>
      <el-button
        v-if="!received"
        class="mr-10px"
        size="small"
        type="primary"
        style="padding: 5px 15px"
        @click="unlock([companyInfo.cid])"
      >
        领取企业
      </el-button>
      <el-text v-else class="mr-10px" type="primary">{{ receiveUser }}已领取</el-text>
    </div>
    <div class="container-title" @mouseover="hidenChilden">
      <div style="display: flex" class="t-section" align="stretch">
        <canvas
          ref="canvasImg"
          class="canvasHead"
          :style="{ background: ColorMap[companyIndex % 4] }"
        ></canvas>
        <div class="t-section__bd">
          <div class="type-name" @mouseleave="setShow(false)">
            <span class="compayName" @mouseover="setShow(true)">{{ companyInfo.companyName }}</span>
            <span v-if="isCopy" class="cloneTxt" @click="copyText(companyInfo.companyName)"
              >复制</span
            >
            <el-tooltip
              class="box-item"
              effect="dark"
              v-if="!isCopy && isfullScreen"
              content="打开新页面"
              placement="bottom-start"
            >
              <router-link
                :to="{ path: '/ent/search/detail', query: { cid: companyInfo.cid } }"
                target="_blank"
              >
                <el-icon size="14" style="cursor: pointer; color: #909399; margin-left: 5px"
                  ><FullScreen
                /></el-icon>
              </router-link>
            </el-tooltip>
          </div>
          <div style="display: flex" class="type-content mt-10px">
            <el-tag v-for="(tag, index) in companyInfo.tags" :key="'tag' + index" class="mr-10px">
              <el-popover placement="bottom" :width="400" trigger="hover" v-if="tag.contentList">
                <template #reference>
                  <span>{{ tag.text }}</span>
                </template>
                <div v-for="(subContent, subIndex) in tag.contentList" :key="'content' + subIndex">
                  <p>{{ subContent.title }}</p>
                  <p
                    v-for="(subItem, itemIndex) in subContent.content"
                    :key="'subIndex' + itemIndex"
                  >
                    {{ subItem }}
                  </p>
                </div>
              </el-popover>
              <span v-else>{{ tag.text }}</span>
            </el-tag>

            <el-tag type="danger" class="mr-10px">
              <i class="el-icon-user"></i>
              {{ numberCount || 0 }}个联系方式
            </el-tag>
            <!-- <el-tag
              class="mr-10px"
              :type="dangerState.includes(companyInfo?.openStatus) ? 'danger' : ''"
              style="font-weight: normal"
            >
              {{ companyInfo?.openStatus }}
            </el-tag> -->
            <el-tag v-if="companyInfo.entType" type="success">
              {{ companyInfo.entType }}
            </el-tag>
          </div>
        </div>
        <div class="t-section__ft">
          <el-button
            v-if="!received"
            class="mr-10px"
            size="small"
            type="primary"
            style="padding: 5px 15px"
            @click="unlock([companyInfo.cid])"
          >
            领取企业
          </el-button>
          <el-text v-else class="mr-10px" type="primary">{{ receiveUser }}已领取</el-text>
        </div>
      </div>
      <div class="h-section">
        <div v-for="(item, index) in headDetails" :key="index" class="h-item">
          <div class="h-box">
            <div class="h-title">{{ item.label }}</div>
            <div class="h-value text-one-line">
              <span>{{ companyInfo[item.key] || '-' }}</span>
            </div>
          </div>
          <div class="verticalline" v-if="index != 3">|</div>
        </div>
        <!-- <div class="h-item">
          <div class="h-box">
            <div class="h-title">更新时间</div>
            <div class="h-value text-one-line">
              <span>{{ companyInfo.updateTime || companyInfo.createTime }}</span>
            </div>
          </div>
        </div> -->
      </div>
      <div class="company-tag">
        <p>
          <span class="title">国标行业：</span>
          <span class="conetent">{{ companyInfo.industry || '-' }}</span>
        </p>
        <p>
          <span class="title">经营地址：</span>
          <span class="conetent">{{ companyInfo.regAddr || '-' }}</span>
        </p>
        <p>
          <span class="title">企业网址：</span>
          <el-link type="primary" @click="openUrl(companyInfo.url)" style="font-size: 12px">{{
            companyInfo.url
          }}</el-link>
        </p>
      </div>
    </div>
    <div>
      <TabsScorll
        :idx="idx"
        :menuList="menuList"
        :companyInfo="companyInfo"
        :listMap="listMap"
        ref="tabScroll"
      />
    </div>
  </div>
</template>
<script setup lang="ts">
import TabsScorll from './TabsScorll.vue'
import { companyReceive, companyGetOne } from '@/api/ent/advanceSearch/index'
import { FullScreen } from '@element-plus/icons-vue'
const props = defineProps({
  value: Object,
  idx: Number || String,
  companyCid: String,
  bigListValue: String,
  isfullScreen: {
    type: Boolean,
    default: () => true
  }
})
const router = useRouter()
const emit = defineEmits(['refresh'])
const numberCount = ref(0)
const listMap = ref({})
const received = ref(false)
const receiveUser = ref('')
const isScroll = ref(true)
const companyInfo = ref({})
const menuList = ref({})
const canvasImg = ref(null)
const tabScroll = ref(null)
const dangerState = ref(['吊销', '注销', '停业', '清算'])
const headDetails = ref([
  { label: '成立日期', key: 'startDate' },
  { label: '注册资本', key: 'regCapital' },
  { label: '法定代表人', key: 'legalPerson' },
  { label: '参保人数', key: 'insuranceNum' }
])
const ColorMap = ref([
  'rgb(132, 202, 176)',
  'rgb(188, 158, 221)',
  'rgb(125, 179, 217)',
  'rgb(140, 163, 205)'
])
const isCopy = ref(false)
// 选中企业列表的下标
const companyIndex = ref(0)
const scrollDom = ref(null)
watch(
  () => props.value,
  (val) => {
    companyIndex.value = sessionStorage.getItem('companyIndex')
    if (Object.keys(props.value).length) {
      received.value = val.received
      numberCount.value = val.numberCount
      receiveUser.value = val.receiveUser
      companyInfo.value = val.companyInfo
      menuList.value = val.menuList
      setCanvas(companyInfo.value.companyName)
    }
  },
  { deep: true }
)
watch(
  () => props.bigListValue,
  (val) => {
    if (Object.keys.length) {
      listMap.value = val
    }
  },
  { deep: true }
)
const hidenChilden = () => {
  tabScroll.value.mouseleaveBox()
}
// 企业详情页面
const openTarget = () => {
  router.push(`/ent/search/detail?cid=${companyInfo.value.cid}`, '_blank')
}

// 滚动
const handleScroll = () => {
  if (scrollDom.value.scrollTop >= 100) {
    isScroll.value = false
  } else {
    isScroll.value = true
  }
  if (scrollDom.value.scrollTop >= 264) {
    tabScroll.value.setScrollTops(true)
  } else {
    tabScroll.value.setScrollTops(false)
  }
}
const setShow = (val) => {
  isCopy.value = val
}
// 复制文本
const copyText = (txt) => {
  navigator.clipboard
    .writeText(txt)
    .then(() => {
      ElMessage.success('复制成功')
    })
    .catch((err) => {
      ElMessage.error('无法复制文本: ', err)
    })
}
// 画布
const setCanvas = (val) => {
  let area = ['省', '市', '县', '区']
  const indexName = val[2]
  let companyName
  let positLeft = 6
  if (val.length < 6) {
    companyName = val.slice(0, 4)
    if (val.length == 2) positLeft = 80
    if (val.length == 3) positLeft = 42
  } else {
    if (area.indexOf(indexName) <= -1) {
      companyName = val.slice(2, 6)
    } else {
      companyName = val.slice(3, 7)
    }
  }
  canvasImg.value.width = canvasImg.value.width
  const ctx = canvasImg.value.getContext('2d')
  ctx.scale(1, 0.5)
  ctx.fillStyle = '#fff'
  ctx.font = '72px sans-serif'
  ctx.fillText(companyName, positLeft, 160)
}

// 领取企业
const unlock = async (ids) => {
  const result = await companyReceive({ ids })
  if (result) {
    ElMessage.success('领取成功!')
    const res = await companyGetOne({ cid: props.companyCid })
    receiveUser.value = res.receiveUser
    received.value = res.received
    emit('refresh', {
      received: res.received,
      receiveUser: res.receiveUser,
      numberList: res.numberList
    })
  } else {
  }
}

const openUrl = (url) => {
  window.open('https://' + url)
}
defineExpose({ hidenChilden })
</script>

<style lang="scss" scoped>
.cloneTxt:hover {
  background: #99999940;
  cursor: pointer;
  color: var(--el-color-primary);
}
p {
  margin: 0;
  padding: 0;
}
.container {
  z-index: 1;
  position: relative;
  flex: 1 1;
  overflow-y: auto;
  background-color: #f5f7f9;
  &::-webkit-scrollbar {
    width: 2px;
  }
  &::-webkit-scrollbar-track {
    background: #f1f1f1;
  }
  &::-webkit-scrollbar-thumb {
    background: #d8d8d8;
  }
  &::-webkit-scrollbar-thumb:hover {
    background: #d8d8d8;
  }
  &::-webkit-scrollbar-thumb:horizontal:start {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  &::-webkit-scrollbar-thumb:horizontal:end {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
  .container-title {
    padding: 20px 20px 10px;
    margin-bottom: 20px;
    background-color: #fff;
    border-radius: 4px;
  }
  .titleScroll {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 21px;
    padding: 20px 20px 10px;
    background-color: #fff;
    border-bottom: 1px solid #e6e6e6;
    width: calc(100% - 40px);
    position: sticky;
    top: 0;
    z-index: 10;
    p {
      font-size: 16px;
    }
  }
}

.t-section {
  padding: 0 0 10px;
  border-bottom: 1px solid #e6e6e6;
  .canvasHead {
    width: 60px;
    height: 60px;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    margin-right: 20px;
  }
  &__hd {
    display: block;
    width: 40px;
    height: 40px;
    margin-right: 15px;
  }

  &__bd {
    flex: 1;

    .type-name {
      color: #333;
      font-size: 16px;
      margin-bottom: 5px;
      display: flex;
      align-items: center;
      .compayName:hover {
        background: #99999940;
      }
      .cloneTxt {
        font-size: 13px;
        margin-left: 5px;
      }
    }
    .type-content {
      .name {
        color: #333;
        font-size: 16px;
        font-weight: 600;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
    }
  }

  &__ft {
    flex-shrink: 0;
    margin-left: 20px;
  }
}

.h-section {
  padding: 15px 0 10px;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;

  .h-item {
    display: flex;
    .h-box {
      min-width: 100px;
      .h-title {
        font-size: 13px;
        color: #999;
        text-align: left;
      }

      .h-value {
        min-height: 14px;
        margin-top: 8px;
        font-size: 13px;
        color: #333;
        padding-bottom: 2px;
        text-align: left;
      }
    }
    .verticalline {
      width: 30px;
      text-align: center;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      color: #cbc3c3;
    }
  }
  // .h-item::after {
  //   content: '';
  //   position: absolute;
  //   top: 20%;
  //   right: -1px;
  //   width: 1px;
  //   height: 50%;
  //   background-color: #cbc3c3;
  // }
}
.company-tag {
  p {
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    margin-bottom: 10px;
    .title {
      font-size: 13px;
      color: #999;
    }
    .conetent {
      font-size: 12px;
      color: #555;
    }
  }
}
</style>
